<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>

    <meta charset="utf-8">

    <title>学生到课信息管理</title>
    <!--引入相关的js文件-->
    <link href="../backPage/ui/bootstrap-3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="../backPage/ui/bootstrap-table-1.11.0/bootstrap-table.min.css" rel="stylesheet"/>
    <link href="../backPage/ui/waves-0.7.5/waves.css" rel="stylesheet"/>
    <link href="../backPage/ui/jquery-confirm/jquery-confirm.min.css" rel="stylesheet"/>
    <link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>

    <script src="../backPage/ui/js/jquery-3.3.1.min.js"></script>
    <script src="../backPage/ui/waves-0.7.5/waves.js"></script>
    <script src="../backPage/ui/jquery-confirm/jquery-confirm.min.js"></script>
    <script src="../backPage/ui/bootstrap-3.3.0/js/bootstrap.min.js"></script>
    <script src="../backPage/ui/bootstrap-table-1.11.0/bootstrap-table.min.js"></script>
</head>

<body>
<div id="main">
    <div id="toolbar">
        <button class="btn btn-default" href="javascript:;" onclick="detailAction()">查看到课率和未到学生名单</button>
        <button class="btn btn-default" href="javascript:;" onclick="deleteAction()">删除学生到课信息</button>
        <button class="btn btn-default" href="javascript:;" onclick="addNameLabelAction()">学生补签到</button>
        <br/>
    </div>
    <table id="table"></table>
</div>

<script>
    // 初始化input特效
    function initMaterialInput() {
        $('form input[type="text"]').each(function () {
            if ($(this).val() != '') {
                $(this).parent().find('label').addClass('active');
            }
        });
    }

    var $table = $('#table');



    $(function() {
        $("#repairButton").click(function(){
            var addInfos = $("#repairNotArrivedStudentNameLabels").val();
            if(addInfos == null){
                alert("当前课程学生已到齐，无需其他添加");
                return;
            }else{
                var repairRecordId = $("#repairRecordId").val();
                $.ajax({
                    url:"/studentManageSystem/repairAddStudentArriveInfo/"+repairRecordId,
                    type:"post",
                    data:{info:addInfos},
                    success:function(data){
                        if(data == "OK"){
                            $table.bootstrapTable('refresh');
                            var rows = $table.bootstrapTable('getSelections');
                            obj = rows[0];
                            var recordId = obj['recordid'];
                            var coursearrangeid = obj['coursearrangeid'];

                            //获取未到课的学生名单
                            $.ajax({
                                url:"/studentManageSystem/getRepairNotArrivedStudentNameLabelsByCourseArrangeId/"+recordId+"/"+coursearrangeid,
                                type:"post",
                                success:function(data){
                                    //清空没有到课的学生信息名单
                                    $("#repairNotArrivedStudentNameLabels").empty();
                                    for(var i = 0;i<data.length;i++){
                                        $("#repairNotArrivedStudentNameLabels").append("<option value="+data[i]+">"+data[i]+"</option>")
                                    }
                                }
                            });

                            alert("补录成功!");
                        }else{
                            alert("补录失败");
                        }
                    }
                })
            }
        });


        // bootstrap table初始化
        $table.bootstrapTable({
            url: '/studentManageSystem/getStudentArriveInfos',
            height: getHeight(),
            striped: true,
            search: true,
            showRefresh: true,
            showColumns: true,
            minimumCountColumns: 2,
            clickToSelect: true,
            detailView: true,
            pagination: true,
            paginationLoop: false,
            sidePagination: 'server',
            silentSort: false,
            sortOrder: "desc",
            smartDisplay: false,
            escape: true,
            searchOnEnterKey: true,
            idField: 'recordid',
            maintainSelected: true,
            toolbar: '#toolbar',
            columns: [
                {field: 'ck', checkbox: true},
                {field: 'recordid', title: '到课信息编号', align: 'center'},
                {field: 'coursearrangeid', title: '课程安排编号',align: 'center'},
                {field:'classroomid',title:'教室编号',align:'center'},
                {field: 'classroomname', title: '教室名称',align: 'center'},
                {field: 'shouldcount', title: '应到人数',align: 'center'},
                {field: 'shouldnamelabels', title: '应到学生名单',align: 'center'},
                {field: 'courseindex', title: '节次',align: 'center'},
                {field: 'startweek', title: '起始周',align: 'center'},
                {field: 'endweek', title: '终止周',align: 'center'},
                {field: 'cid', title: '课程编号',align: 'center'},
                {field: 'coursename', title: '课程名称',align: 'center'},
                {field: 'weekday', title: '工作日',align: 'center'},
                {field: 'teacherid', title: '教师编号',align: 'center'},
                {field: 'teachername', title: '教师名称',align: 'center'},
                {field: 'realcount', title: '实到人数',align: 'center'},
                {field: 'realnamelabels', title: '实到学生名单',align: 'center'},
                {field: 'recordtime', title: '记录时间',align: 'center',formatter:'timeFormatter'},
                {field: 'action', title: '操作', align: 'center', formatter: 'actionFormatter', events: 'actionEvents', clickToSelect: false}
            ]
        });
    });

    // 格式化操作按钮
    function actionFormatter(value, row, index) {
        return [
            '<a class="update" href="javascript:;" onclick="detailAction()" data-toggle="tooltip" title="查看到课率和未到学生名单"><i class="glyphicon glyphicon-edit"></i></a>　',
            '<a class="delete" href="javascript:;" onclick="deleteAction()" data-toggle="tooltip" title="删除"><i class="glyphicon glyphicon-remove"></i></a>'
        ].join('');
    }
    // 格式化时间
    function timeFormatter(value , row, index) {
        return new Date(value).toLocaleString();
    }

    function getHeight() {
        return $(window).height() - 20;
    }

    // 删除
    var deleteDialog;
    function deleteAction() {
        var rows = $table.bootstrapTable('getSelections');
        if (rows.length == 0) {
            $.confirm({
                title: false,
                content: '请至少选择一条记录！',
                autoClose: 'cancel|3000',
                backgroundDismiss: true,
                buttons: {
                    cancel: {
                        text: '取消',
                        btnClass: 'waves-effect waves-button'
                    }
                }
            });
        } else {
            deleteDialog = $.confirm({
                type: 'red',
                animationSpeed: 300,
                title: false,
                content: '确认删除该学生到课信息吗？',
                buttons: {
                    confirm: {
                        text: '确认',
                        btnClass: 'waves-effect waves-button',
                        action: function () {
                            var ids = new Array();
                            for (var i in rows) {
                                ids.push(rows[i].recordid);
                            }
                            $.ajax({
                                type: 'get',
                                url: '/studentManageSystem/deleteRuntimeCourseArrangeInfoRecordById/'+ids.join("-"),
                                success: function(result) {
                                    if(result == "OK"){
                                        deleteDialog.close();
                                        $table.bootstrapTable('refresh');
                                        alert("删除成功");
                                    }else{
                                        alert("删除失败");
                                    }
                                },
                                error: function(XMLHttpRequest, textStatus, errorThrown) {
                                    $.confirm({
                                        theme: 'dark',
                                        animation: 'rotateX',
                                        closeAnimation: 'rotateX',
                                        title: false,
                                        content: textStatus,
                                        buttons: {
                                            confirm: {
                                                text: '确认',
                                                btnClass: 'waves-effect waves-button waves-light'
                                            }
                                        }
                                    });
                                }
                            });
                        }
                    },
                    cancel: {
                        text: '取消',
                        btnClass: 'waves-effect waves-button'
                    }
                }
            });
        }
    }


    //查看到课信息记录
    function detailAction() {
        var rows = $table.bootstrapTable('getSelections');
        if (rows.length == 0) {
            $.confirm({
                title: false,
                content: '请至少选择一条记录！',
                autoClose: 'cancel|3000',
                backgroundDismiss: true,
                buttons: {
                    cancel: {
                        text: '取消',
                        btnClass: 'waves-effect waves-button'
                    }
                }
            });
        } else {
            var obj = rows[0];
            $("#recordId").val(obj['recordid']);
            $("#arriveRate").val(((parseFloat(obj['realcount'])/parseFloat(obj['shouldcount'])).toFixed(2) * 100) +"%");

            $("#arrivedStudentNameLabels").empty();
            var namelabels = obj['realnamelabels'].split(",");

            for(var i = 0;i<namelabels.length;i++){
                $("#arrivedStudentNameLabels").append("<option value="+namelabels[i]+">"+namelabels[i]+"</option>")
            }

            var coursearrangeid = obj['coursearrangeid'];

            //清空没有到课的学生信息名单
            $("#notArrivedStudentNameLabels").empty();

            //获取未到课的学生名单
            $.ajax({
                url:"/studentManageSystem/getNotArrivedStudentNameLabelsByCourseArrangeId/"+coursearrangeid,
                type:"post",
                data:{arrivedStudentNameLabels:obj['realnamelabels']},
                success:function(data){
                    for(var i = 0;i<data.length;i++){
                        $("#notArrivedStudentNameLabels").append("<option value="+data[i]+">"+data[i]+"</option>")
                    }
                }
            });

            $("#detailModal").modal('show');
        }
    }


    //补录签到功能
    function addNameLabelAction() {
        var rows = $table.bootstrapTable('getSelections');
        if (rows.length == 0) {
            $.confirm({
                title: false,
                content: '请至少选择一条记录！',
                autoClose: 'cancel|3000',
                backgroundDismiss: true,
                buttons: {
                    cancel: {
                        text: '取消',
                        btnClass: 'waves-effect waves-button'
                    }
                }
            });
        } else {
            var obj = rows[0];
            $("#repairRecordId").val(obj['recordid']);
            var coursearrangeid = obj['coursearrangeid'];

            //清空没有到课的学生信息名单
            $("#repairNotArrivedStudentNameLabels").empty();

            //获取未到课的学生名单
            $.ajax({
                url:"/studentManageSystem/getNotArrivedStudentNameLabelsByCourseArrangeId/"+coursearrangeid,
                type:"post",
                data:{arrivedStudentNameLabels:obj['realnamelabels']},
                success:function(data){
                    for(var i = 0;i<data.length;i++){
                        $("#repairNotArrivedStudentNameLabels").append("<option value="+data[i]+">"+data[i]+"</option>")
                    }
                }
            });
            $("#addStudentNameLabelModel").modal('show');
        }
    }

</script>

<div class="modal fade" id="addStudentNameLabelModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="ModalTitle">
                    学生补签到
                </h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="repairRecordId">到课信息编号</label>
                        <input class="form-control" id="repairRecordId" name="repairRecordId" readonly="readonly"/>
                    </div>

                    <div class="form-group">
                        <label for="notArrivedStudentNameLabels">未到课学生名单</label>
                        <select class="form-control" id="repairNotArrivedStudentNameLabels" name="repairNotArrivedStudentNameLabels"></select>
                    </div>
                </form>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary" id="repairButton">
                    确认补录
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>


<!-- 查看学生到课信息模态框（Modal） -->
<div class="modal fade" id="detailModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="updateModalTitle">
                    查看到课率和未到学生名单
                </h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="recordId">到课信息编号</label>
                        <input class="form-control" id="recordId" name="recordId" readonly="readonly"/>
                    </div>
                    <div class="form-group">
                        <label for="arriveRate">到课率</label>
                        <input class="form-control" id="arriveRate" name="arriveRate" readonly="readonly"/>
                    </div>

                    <div class="form-group">
                        <label for="arrivedStudentNameLabels">到课学生名单</label>
                        <select class="form-control" id="arrivedStudentNameLabels" name="arrivedStudentNameLabels" readonly="readonly"></select>
                    </div>

                    <div class="form-group">
                        <label for="notArrivedStudentNameLabels">未到课学生名单</label>
                        <select class="form-control" id="notArrivedStudentNameLabels" name="notArrivedStudentNameLabels" readonly="readonly"></select>
                    </div>
                </form>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary" id="detailubmitButton">
                    确认修改
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
</body>
</html>